<template>
  <el-container class="discipline">
    <div :class="['ed-aside', collapse? 'collapse' :'']">
      <transition
        view="fade-transform"
        name="fade"
      >
        <div class="ed-aside-main">
          <div class="logo">
            <img
              class="complete"
              v-if="!collapse"
              src="logo.png"
              alt="logo"
            >
            <img
              v-else
              class="collapse"
              src="logo.png"
              alt="logo"
            >
          </div>
          <slot name="aside" />
        </div>
      </transition>
    </div>
    <el-container>
      <el-header height="50px">
        <i
          class="menu-switch"
          :class="{ 'el-icon-s-fold': !collapse, 'el-icon-s-unfold': collapse }"
          @click="onClick"
        />
        <div>
          <slot name="top" />
        </div>
        <el-button icon="el-icon-user-solid" />
      </el-header>
      <el-main>
        <transition
          view="fade-transform"
          name="fade"
        >
          <slot />
        </transition>
      </el-main>
      <el-footer height="50px">
        <slot name="footer" />
      </el-footer>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data () {
    return {
      collapse: false
    }
  },
  methods: {
    onClick () {
      this.collapse = !this.collapse
      this.$emit('collapse', this.collapse)
    }
  }
}
</script>

<style scoped lang="less">

@header: 50px;

.discipline {
  overflow: hidden;
  background-color: #f7f7f7;
  height: 100%;
  width: 100%;
}

.ed-aside {
  background-color: #2f3447;
  overflow: hidden;
  height: 100%;
  width: 255px;
}

.ed-aside.collapse {
  width: 64px;
}

.ed-aside-main {
  height: 100%;
  box-shadow: 0 4px 8px rgba(0,0,0,.3);
}

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
}

.logo .collapse {
  width: 30px;
  height: 30px;
}

.logo .complete {
  width: 193px;
  height: 30px;
}

.el-header, .el-footer {
  color: #333;
  height: @header;
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-header {
  justify-content: space-between;
  padding: 0 10px;
}

.el-footer {
  /*background-color: #B3C0D1;*/
}

.el-main {
  height: calc(100vh - @header - @header);
  width: 100%;
  position: relative;
  background-color: #E9EEF3;
  color: #333;
}
//.el-aside {
//  background-color: #545c64;
//  overflow: hidden;
//}

//.el-menu-v:not(.el-menu--collapse) {
//  width: 200px;
//  min-height: 400px;
//}

.menu-switch {
  //height: 40px;
  //width: 40px;
  cursor: pointer;
  font-size: 22px;
  line-height: 40px;
}

//.el-menu-v {
//  border-right: 0;
//}

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>
